<%--
  Created by IntelliJ IDEA.
  User: 86158
  Date: 2022/11/1
  Time: 14:37
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HRM</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/layui/layui.js"></script>
</head>
<body>

<div class="layui-card">

    <!-- 搜索条件start -->
    <form class="layui-form layui-card-header layuiadmin-card-header-auto"
          id="searchForm">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">文档标题</label>
                <div class="layui-input-block input-box">
                    <input type="text" name="title" placeholder="请输入"
                           autocomplete="off"
                           class="layui-input">
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">文档描述</label>
                <div class="layui-input-block input-box">
                    <input type="text" name="remark" placeholder="请输入"
                           autocomplete="off"
                           class="layui-input">
                </div>
            </div>

            <div class="layui-inline">
                <button type="button" class="layui-btn layui-btn-normal" id="SearchBtn"
                        data-type="reload">搜索
                </button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
    <!-- 搜索条件end -->

    <!-- 数据表格start -->
    <div class="layui-card-body">
        <table class="layui-hide" id="List" lay-filter="List-toolbar"></table>

        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm layui-bg-blue" id="reloadTest">
                    刷新列表
                </button>
            </div>
        </script>

        <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-xs" lay-event="show">查看</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs deleteBtn" lay-event="del">删除</a>
        </script>

        <script type="text/html" id="downBar">
            <a class="layui-btn layui-btn-xs" lay-event="down">下载</a>
        </script>
    </div>
    <!-- 数据表格end -->
</div>
<script>
    function checkType(type) {
        let types = ["doc", "docx", "pptx", "exe", "xls", "xlsx", "ppt", "wmv"];
        for (let i = 0; i < types.length; i++) {
            if (types[i] == type) {
                return false;
            }
        }
        return true;
    }

    layui.use(['table', 'dropdown', 'jquery'], function () {
        var table = layui.table;
        var $ = layui.jquery;

        // 创建渲染数据表格
        var tableIns = table.render({
            elem: '#List'
            , url: '${pageContext.request.contextPath}/document/list'
            , toolbar: '#toolbarDemo'
            , defaultToolbar: ['filter', 'exports', 'print', {
                title: '帮助'
                , layEvent: 'LAYTABLE_TIPS'
                , icon: 'layui-icon-tips'
            }]
            , height: "full-" + Math.round(Number($('.layui-card-header').height()) + 60)
            , cellMinWidth: 80
            , page: true,
            limits: [5, 10, 20, 50, 100],
            cols: [[
                {type: "checkbox", fixed: "left", width: 50},
                {field: 'id', title: 'id', minWidth: 100, align: "center"},
                {field: 'title', title: '文档标题', minWidth: 100, align: "center"},
                {field: 'fileType', title: '文档类型', minWidth: 100, align: "center"},
                {
                    field: 'fileSize', title: '文档大小',
                    templet: function (d) {
                        let size =  Math.ceil(d.fileSize / 1024);
                        if (size >= 1024){
                            return Math.ceil(size / 1024) + "MB"
                        }
                        return size + "KB"

                    }, minWidth: 100, align: "center"
                },
                {field: 'remark', title: '文档描述', minWidth: 100, align: "center"},
                {
                    field: 'createDate', templet: function (d) {
                        var toDateString = layui.util.toDateString(d.createDate, "yyyy-MM-dd HH:mm:ss");
                        return toDateString;
                    }, title: '上传时间', minWidth: 100, align: "center"
                },
                {field: 'userName', title: '上传用户', minWidth: 100, align: "center"},
                {title: '操作', width: 160, templet: '#barDemo', fixed: "right", align: "center"},
                {title: '下载', width: 80, templet: '#downBar', fixed: "right", align: "center"}
            ]]
            , done: function () {
                var id = this.id;

                $('#reloadTest').click(function () {
                    table.reload('List');
                });
            }
            , error: function (res, msg) {
                console.log(res, msg)
            }
        });


        var active = {
            reload: function () {
                //获取搜索条件值
                var title = $("#searchForm").find("input[name='title']").val().trim();
                var remark = $("#searchForm").find("input[name='remark']").val().trim();
                //表格重载
                tableIns.reload({
                    where: { //设定异步数据接口的额外参数，任意设
                        title: title,
                        remark: remark
                    }
                });
            }
        };
        $('#SearchBtn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        // 工具栏事件
        table.on('toolbar(List-toolbar)', function (obj) {
            var id = obj.config.id;
            var checkStatus = table.checkStatus(id);
            var othis = lay(this);
            switch (obj.event) {
                case 'LAYTABLE_TIPS':
                    layer.alert('Table for layui-v' + layui.v);
                    break;
            }
            ;
        });

        //触发单元格工具事件
        table.on('tool(List-toolbar)', function (obj) { // 双击 toolDouble
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    $.ajax({
                        url: "${pageContext.request.contextPath}/document/delete/" + data.id,
                        contentType: "application/json;charset=utf-8",
                        dataType: 'json',
                        success: function (rs) {
                            console.log(rs)
                            if (rs.code == "200") {
                                layer.msg("操作成功", {
                                    icon: 1,
                                    success: function () {
                                        $('#SearchBtn').trigger("click");
                                    }
                                });
                            } else {
                                layer.msg("删除失败", {icon: 2});
                            }
                        },
                        error: function (e) {
                            layer.msg(e.responseText, {icon: 2});
                        }
                    })
                    layer.close(index);
                });
            } else if (obj.event === 'show') {
                if (checkType(data.fileType)) {
                    layer.open({
                        id: "show-frame",
                        type: 2,
                        resize: false,
                        area: ['550px', '500px'],
                        title: '在线预览',
                        fixed: false,
                        maxmin: true,
                        content: "${pageContext.request.contextPath}/file/" + data.fileName
                    });
                } else {
                    layer.msg("在线预览不支持该类型", {icon: 2})
                }

            } else if (obj.event === 'down') {
                // layer.msg(data.fileName)
                window.open("${pageContext.request.contextPath}/document/download?fileName=" + data.fileName);

            }
        });
    });
</script>

</body>
</html>
